<template>
  <div class="wrapper">
    <transition
      enter-active-class="animate__animated animate__fadeInLeft animate__faster"
      leave-active-class="animate__animated animate__fadeOutRight animate__faster"
    >
      <div class="info" v-show="show">
        <div class="info-title">修改个人信息：</div>
        <div class="form">
          <div class="nickname">
            昵称：
            <input class="input" type="text" v-model="nickname" placeholder="请输入新昵称"/>
          </div>
          <div class="avatar">
            头像：
            <input class="input" type="text" v-model="avatar" placeholder="请输入新头像url"/>
          </div>
          <button class="btn" @click="handleBtnClick">提交</button>
        </div>
      </div>
    </transition>
    <div class="cover" @click="$emit('infobox')" v-show="show"></div>
  </div>
</template>
<script>
import axios from 'axios'
import qs from 'qs'
import { Toast } from 'mint-ui'
export default {
  name: 'ChangeInfo',
  props: {
    show: Boolean
  },
  data () {
    return {
      nickname: '',
      avatar: ''
    }
  },
  methods: {
    handleBtnClick () {
      let flag = false
      if (this.nickname) {
        flag = true
        axios.post('/api/usr/setNickname?nickname=' + this.nickname).then(function (res) {
          console.log(res)
        })
        this.$store.commit('changeNickname', {
          nickname: this.nickname
        })
      }
      if (this.avatar) {
        flag = true
        axios.post('/api/usr/setHeadPic', qs.stringify({
          picUrl: this.avatar
        })).then(function (res) {
        })
        this.$store.commit('changeAvatar', {
          avatar: this.avatar
        })
      }
      this.$emit('infobox')
      if (flag) {
        Toast({
          message: '修改成功！',
          position: 'bottom',
          duration: 2000
        })
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
  .wrapper
    .info
      position:fixed
      z-index: 2000
      width: 3rem
      height: 3rem
      top: 50%
      left: 50%
      margin-left: -1.5rem
      margin-top: -1.5rem
      box-sizing: border-box
      background: #ffffff
      border-radius: .5rem
      .info-title
        height: .6rem
        line-height: .6rem
        padding-left: .6rem
      .form
        margin-top:.2rem
        width:100%
        height: 2.2rem
        position: relative
        .nickname
          width:100%
          text-align:center
          font-size: .25rem
        .avatar
          margin-top:.2rem
          width:100%
          text-align:center
          font-size: .25rem
        .input
          width: 1.5rem
          font-size: .2rem
        .btn
          position: absolute
          bottom: .3rem
          left: 0
          right: 0
          display: block
          margin: 0 auto
          text-align: center
          height: .5rem
          width: 1.2rem
          background: red
          border-radius: .1rem
          color: #fff
          font-weight:bold
    .cover
      position: fixed
      top: 0
      bottom: 0
      left: 0
      right: 0
      z-index: 1000
      background: rgba(0,0,0,.5)
</style>
